<template>
  <el-drawer
    v-model:visible="visible"
    :title="title"
    :size="size"
    :direction="direction"
    :append-to-body="appendToBody"
    @close="handleClose"
  >
    <slot></slot>
    <div v-if="showFooter" class="drawer-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import { ElDrawer, ElButton } from "element-plus";

const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: ""
  },
  size: {
    type: String,
    default: "30%"
  },
  direction: {
    type: String as () => "ltr" | "rtl" | "ttb" | "btt",
    default: "rtl"
  },
  appendToBody: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: false // 默认不显示按钮
  }
});

const emits = defineEmits(["close", "confirm"]);

const visible = ref(props.visible);
const showFooter = ref(props.showFooter);

const handleClose = () => {
  visible.value = false;
  emits("close");
};

const handleConfirm = () => {
  emits("confirm");
  handleClose();
};

const handleCancel = () => {
  handleClose();
};
</script>

<style scoped>
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>